<template>
	<view>
		<view class="topview">
			<!-- 	<u-search searchIconSize="35" :showAction="true" placeholder="请输入从业人员信息" actionText="搜索" :animation="true">
			</u-search> -->
			<u-tabs :list="list1" @click="tabClick" :current="current" @change="tabChange" lineWidth="63px"
				lineColor="#1590EF" :activeStyle="{
					    color: '#1590EF',
					    fontWeight: 'bold',
					    transform: 'scale(1.05)'
					}" :inactiveStyle="{
					    color: '#606266',
					    transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
		</view>


		<view class="view_name">
			<view class="left_name">
				<text>{{mapData.name}}&nbsp;</text>
			</view>
			<view class="right_code">
				<canvas canvas-id="uqrcode"></canvas>
			</view>
		</view>
		<!-- 从业人员信息 -->
		<view style="padding-bottom: 20px;" v-if="current==0">
			<!-- 基本信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">基本信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">性别</view>
						<view class="text_right">{{mapData.sex==1?'男':'女'}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">出生日期</view>
						<view class="text_right">{{mapData.birthday}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">身份证号</view>
						<view class="text_right">{{mapData.idCard}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">所属企业</view>
						<view class="text_right">{{mapData.ownerName}}</view>
					</view>
				</view>
			</view>

			<!-- 从业资格证信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">从业资格证信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="" v-if="!mapData.practCertVOList" style="text-align: center;font-size: 30rpx;color: #000;">
						暂无从业资格证信息
					</view>
					<swiper class="swiper" v-else :autoplay="true" :interval="3000" :duration="500">
						<swiper-item v-for="(item,index) in mapData.practCertVOList" :key="index">
							<view class="bottom_text">
								<view class="text_left">从业资格类别</view>
								<view class="text_right">{{item.licType}}</view>
							</view>
							<view class="bottom_text">
								<view class="text_left">从业资格证号</view>
								<view class="text_right">{{item.licNum}}</view>
							</view>
							<view class="bottom_text">
								<view class="text_left">初领时间</view>
								<view class="text_right">{{item.begin}}</view>
							</view>
							<view class="bottom_text">
								<view class="text_left">发证日期</view>
								<view class="text_right">{{item.issue}}</view>
							</view>
							<view class="bottom_text">
								<view class="text_left">有效期起</view>
								<view class="text_right">{{item.validStartDate}}</view>
							</view>
							<view class="bottom_text">
								<view class="text_left">有效期止</view>
								<view class="text_right">{{item.validEndDate}}</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>


			<!-- 诚信考核信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">诚信考核信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">考核日期</view>
						<view class="text_right">{{mapData.sincAssessDate}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">当前诚信等级</view>
						<view class="text_right">{{mapData.sincAssessGrade}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">考核机构名称</view>
						<view class="text_right">{{mapData.sincAssessOrg}}</view>
					</view>

				</view>
			</view>


			<!-- 继续教育培训信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">继续教育培训信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">培训成绩</view>
						<view class="text_right">{{mapData.reEduAchi}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">结业证书编号</view>
						<view class="text_right">{{mapData.reEduCertNo}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">培训机构</view>
						<view class="text_right">{{mapData.reEduTrainOrg}}</view>
					</view>

				</view>
			</view>


		</view>

		<!-- 从业人员违规信息 -->
		<view style="padding-bottom: 20px;" v-if="current==1">
			<!-- 基本信息 -->
			<view class="list_item">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">基本信息</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">性别</view>
						<view class="text_right">{{mapData.sex==1?'男':'女'}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">出生日期</view>
						<view class="text_right">{{mapData.birthday}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">身份证号</view>
						<view class="text_right">{{mapData.idCard}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">所属企业</view>
						<view class="text_right">{{mapData.ownerName}}</view>
					</view>
				</view>
			</view>


			<view class="list_item" v-for="(item,index) in listData" :key="index">
				<view class="item_top">
					<view class="view_pai">
						<u-image :src="src1" width="10px" height="12px" style="margin-right: 5px;"></u-image>
						<text class="text_pai">案件号&nbsp;{{item.caseNo}}</text>
					</view>
				</view>
				<view style="height: 1px;background-color: #ccc;"></view>
				<view class="item_bottom">
					<view class="bottom_text">
						<view class="text_left">违规类型</view>
						<view class="text_right">{{item.trafficType}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">发生时间</view>
						<view class="text_right">{{item.trafficTime}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">违规行为</view>
						<view class="text_right">{{item.trafficEhavior}}</view>
					</view>
					<view class="bottom_text">
						<view class="text_left">结案情况</view>
						<view class="text_right">{{item.caseClosed}}</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		staffLevel,
		staffList
	} from '@/common/api/req.js'
	import {
		dateFormat
	} from "@/common/util.js"
	import uQRCode from '@/common/uqrcode.js' //引入uqrcode.js
	export default {
		data() {
			return {
				src1: "/static/index/tj_icon.png",
				list1: [{
					name: '从业人员信息',
				}, {
					name: '从业人员违规信息',
				}],
				current: 0,
				listData: [],
				mapData: {},
				uqrCodeType: 0,
				scoreType: [],
				uqrCodeList: [{
					color: '#409EFF',
					text: '蓝码'
				}, {
					color: '#FFD04D',
					text: '黄码'
				}, {
					color: '#F56C6C',
					text: '红码'
				}],



			};
		},
		onLoad(option) {
			this.mapData = JSON.parse(option.data)
			this.listData = JSON.parse(option.data).violationVOList
		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		methods: {
			tabClick() {},
			tabChange(e) {
				this.current = e.index
			},
			getScoreType(score) {
				for (var i = 0; i < this.scoreType.length; i++) {
					if (score >= this.scoreType[i]) {
						return i;
					}
				}
				return -1;
			},
			qrFun(text) {
				uQRCode.make({
					canvasId: 'uqrcode',
					componentInstance: this,
					text: text,
					size: 85,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: this.uqrCodeList[this.uqrCodeType].color,
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.H,
					success: res => {
						// console.log(res);
					},
				})
			}
		},
		mounted() {
			staffLevel(2).then(res => {
				const resData = res.data.data;
				this.scoreType = []
				resData.forEach(item => {
					this.scoreType.push(item.minScore);
				})
				return staffList({
					archiveCode: this.mapData.idCard,
				})
			}).then(res => {
				const resData = res.data.data;
				if (resData.length) {
					this.info = resData[0]
					const qrData = {
						uid: this.mapData.idCard,
						id: resData[0].id,
						// archiveCode: resData[0].archiveCode,
						// archiveName: resData[0].archiveName,
						evalSection: resData[0].evalSection,
						levels: resData[0].levels,
						score: resData[0].score,
						datetime: dateFormat(),
					}
					this.uqrCodeType = this.getScoreType(qrData.score)
					this.qrFun(JSON.stringify(qrData)); //调用生成二维码方法
					this.timer = setInterval(() => {
						this.datetime = dateFormat();
					})
				}
			}).then(res => {
				// this.waybillList = res.data.data;
			})
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EFEFEF;
	}

	.topview {
		padding: 0px 15px;
		background-color: #fff;
		position: sticky;
		top: 0;
		z-index: 999;

		.u-search__content {
			padding: 5px 10px;
		}
	}



	.list_item {
		border-radius: 10px;
		background-color: #FFFFFF;
		margin: 10px 20px 0 20px;
		padding-bottom: 5px;



		.item_top {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			border-radius: 10rpx;

			.view_pai {
				padding-left: 30rpx;
				height: 40rpx;
				margin-top: 30rpx;
				display: flex;
				align-items: center;

				.text_pai {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

			.view_state {
				height: 50rpx;
				border-top-right-radius: 10rpx;
				border-bottom-left-radius: 8rpx;
				padding-left: 5rpx;
				padding-right: 5rpx;
				background-color: #666666;
				display: flex;
				align-items: center;

				.text_state {
					font-size: 28rpx;
					font-weight: 700;
				}
			}

		}

		.item_line {
			height: 1rpx;
			background-color: #F2F2F2;
			margin-left: 35rpx;
			margin-right: 35rpx;
		}

		.item_center {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 20rpx;
			padding-bottom: 10rpx;

			.center_top {
				display: flex;
				height: 50rpx;
				align-items: center;

				.view_jia {
					width: 45rpx;
					height: 45rpx;
					background-color: #4CAF50;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.view_ya {
					width: 45rpx;
					height: 45rpx;
					background-color: #2196F3;
					border-radius: 45rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					text {
						color: #FFFFFF;
						font-size: 20rpx;
						font-weight: 700;
					}
				}

				.text_name {
					margin-left: 20rpx;
					font-size: 28rpx;
					font-weight: 700;
				}

				.text_phone {
					margin-left: 30rpx;
					font-size: 28rpx;
					font-weight: 700;
					color: #666666;
				}
			}

			.center_line {
				margin-left: 22rpx;
				height: 15rpx;
				width: 5rpx;
				background-color: #000000;
			}

		}

		.item_bottom {
			display: flex;
			flex-direction: column;
			padding-left: 35rpx;
			padding-top: 10px;

			.swiper {
				height: 390rpx;
			}

			.bottom_text {
				display: flex;
				align-items: center;
				padding-top: 10rpx;
				padding-bottom: 10rpx;

				.text_left {
					font-size: 30rpx;
					color: #666666;
					width: 120px;
				}

				.text_right {
					flex: 1;
					font-size: 30rpx;
					display: inline-block;
					// white-space: nowrap;
					// overflow: hidden;
					// text-overflow: ellipsis;
				}

			}
		}
	}


	.view_name {
		// width: calc(100% - 40px);
		height: 90px;
		display: flex;
		padding: 10px;
		background-color: #fff;
		margin: 10px 20px;
		border-radius: 10px;

		.left_name {
			width: 69%;
			// flex: 2;
			// display: flex;
			// align-items: center;
			// text-align: center;
			line-height: 90px;
			display: inline-block;
			border-right: 1px #1590EF solid;
			margin: 0 20px 0 0;

			text {
				color: #1590EF;
				font-size: 20px;
				margin-left: 15px;
			}
		}

		.right_code {
			width: 30%;
		}

	}
</style>
